<template>
  <div style="padding-top: 15px">
    <el-form ref="form" :model="form" label-width="80px">
      <table>
        <tbody>
          <tr>
            <td style="padding-bottom: 15px;padding-left: 15px">
              <span class="user-query-span">用户类型：</span>
            </td>
            <td style="padding-bottom: 15px;padding-right: 15px">
                <el-select v-model="form.userType" placeholder="请选择用户类型" clearable>
                  <el-option
                    v-for="item in userBox"
                    :key="item.val"
                    :label="item.lab"
                    :value="item.val"/>
                </el-select>
            </td>
            <td style="padding-bottom: 15px;padding-left: 15px">
              <span class="user-query-span">姓名：</span>
            </td>
            <td style="padding-bottom: 15px;padding-right: 15px">
              <el-input v-model="form.userName" type="text" placeholder="请输入姓名" clearable></el-input>
            </td>
            <td style="padding-bottom: 15px;">
              <span class="user-query-span">编号：</span>
            </td>
            <td style="padding-bottom: 15px;padding-right: 15px">
                <el-input v-model="form.number" type="text" placeholder="请输入编号" clearable></el-input>
            </td>
            <td style="padding-bottom: 15px;">
              <span class="user-query-span">手机号：</span>
            </td>
            <td style="padding-bottom: 15px;padding-right: 15px">
              <el-input v-model="form.phone" type="text" placeholder="请输入手机号" clearable></el-input>
            </td>
          </tr>
        </tbody>
      </table>
    </el-form>
    <div style="float: right;position: relative;bottom: 50px;right: 50px">
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "userQuery",

  data(){
    return {
      userBox:[{
        lab:"管理员",
        val:1
      },{
        lab:"教师",
        val:2
      },{
        lab:"学生",
        val:3
      },
      ],

      form:{
        userName:'',
        number:'',
        phone:'',
        userType:'',
      }
    }
  },

  methods:{
    handleSearch(){
      console.log()
      this.$parent.$refs.userList.queryParams.userType = this.form.userType
      this.$parent.$refs.userList.queryParams.userName = this.form.userName
      this.$parent.$refs.userList.queryParams.number = this.form.number
      this.$parent.$refs.userList.queryParams.phone = this.form.phone
      this.$parent.$refs.userList.getUserPage()
    }
  }

}
</script>

<style scoped>
.user-query-span{
  font-size: 14px;
  color: #999999;
}
</style>
